<script setup lang="ts">
import { ref } from 'vue'
import MainMenu from './components/MainMenu.vue'
import MainHeard from './components/MainHeard.vue'
import { useUserStore } from '/@/store'

let asideWidth: string = ref('200px')

if (useUserStore().isCollapse) {
  asideWidth = 'auto'
} else {
  asideWidth = '200px'
}

const aside = ref(null)

useUserStore().$subscribe(mutation => {
  const val: any = mutation.events.newValue
  if (mutation.events.key == 'isCollapse') {
    if (val) {
      asideWidth = 'auto'
    } else {
      asideWidth = '200px'
    }
    aside.value.$el.style.width = asideWidth
  }
})
</script>

<template>
  <el-container class="h-full">
    <el-aside ref="aside" :width="asideWidth" class="h-full w-full">
      <MainMenu />
    </el-aside>
    <el-container>
      <el-header class="bg-gray-800 text-white">
        <MainHeard />
      </el-header>
      <el-main class="bg-gray-100">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped></style>
